{extend name="public/base" /}
{block name="content-header"}
<h5><i class="fa fa-fw fa-connectdevelop"></i>  配置排序 [ <a href="{$Think.cookie.__forward__}">返回列表</a> ]</h5>
{/block}

{block name="body"}
<div class="row">
    <div class="col-xs-12">
        <div class="sort">
            <form action="{:url('sort')}" method="post">
                <!-- <div class="sort_top">
                    查找：<input type="text"><button class="btn search" type="button">查 找</button>
                </div> -->

                <div class="sort_center">

                    <div class="sort_option">
                        <select value="" size="8">
                            {volist name="list" id="vo"}
                            <option class="ids" title="{$vo.title}" value="{$vo.id}">{$vo.title}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="sort_btn">
                        <button class="top btn btn-success" type="button">第 一</button>
                        <button class="up btn btn-success" type="button">上 移</button>
                        <button class="down btn btn-success" type="button">下 移</button>
                        <button class="bottom btn btn-success" type="button">最 后</button>
                    </div>
                </div>
                <div class="sort_bottom">
                    <input type="hidden" name="ids">
                    <button class="sort_confirm btn submit-btn btn-danger" type="button">确 定</button>
                    <button class="sort_cancel btn btn-success" type="button" url="{$Think.cookie.__forward__}">返 回</button>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
    $(function(){
        highlight_subnav('{:url("index")}');
        sort();
        $(".top").click(function(){
            rest();
            $("option:selected").prependTo("select");
            sort();
        })
        $(".bottom").click(function(){
            rest();
            $("option:selected").appendTo("select");
            sort();
        })
        $(".up").click(function(){
            rest();
            $("option:selected").after($("option:selected").prev());
            sort();
        })
        $(".down").click(function(){
            rest();
            $("option:selected").before($("option:selected").next());
            sort();
        })
        $(".search").click(function(){
            var v = $("input").val();
            $("option:contains("+v+")").attr('selected','selected');
        })
        function sort(){
            $('option').text(function(){return ($(this).index()+1)+'.'+$(this).text()});
        }

        //重置所有option文字。
        function rest(){
            $('option').text(function(){
                return $(this).text().split('.')[1]
            });
        }

        //获取排序并提交
        $('.sort_confirm').click(function(){
            var arr = new Array();
            $('.ids').each(function(){
                arr.push($(this).val());
            });
            $('input[name=ids]').val(arr.join(','));
            $.post(
                $('form').attr('action'),
                {
                    'ids' :  arr.join(',')
                },
                function(data){
                    if (data.code) {
                        layui.layer.msg(data.msg + ' 页面即将自动跳转~',{icon: 6});
                    }else{
                        layui.layer.msg(data.msg + ' 页面即将自动跳转~',{icon: 5});
                    }
                    setTimeout(function(){
                        if (data.code) {
                            $('.sort_cancel').click();
                        }
                    },1500);
                },
                'json'
            );
        });

        //点击取消按钮
        $('.sort_cancel').click(function(){
            window.location.href = $(this).attr('url');
        });
    })
</script>
{/block}